body {
  font-family: Verdana, Helvetica, sans-serif;
  font-size: 14px;
  color : #ffffff;
  background-color: #000000;
  margin: 0;
  padding: 0;
}

// from: http://webdesignerwall.com/tutorials/css3-gradient-buttons
.button {
	display: inline-block;
	outline: none;
	cursor: pointer;
	text-align: center;
	text-decoration: none;
	font: Arial, Helvetica, sans-serif;
	padding: 2em 3em 2em;
	text-shadow: 0 1px 1px rgba(0,0,0,.3);
	-webkit-border-radius: .5em; 
	-moz-border-radius: .5em;
	border-radius: .5em;
	-webkit-box-shadow: 0 1px 2px rgba(0,0,0,.2);
	-moz-box-shadow: 0 1px 2px rgba(0,0,0,.2);
	box-shadow: 0 1px 2px rgba(0,0,0,.2);
}
.button:hover {
	text-decoration: none;
}
.button:active {
	position: relative;
	top: 1px;
}

.orange {
	color: #fef4e9;
	border: solid 1px #da7c0c;
	background: #f78d1d;
	background: -webkit-gradient(linear, left top, left bottom, from(#faa51a), to(#f47a20));
	background: -moz-linear-gradient(top,  #faa51a,  #f47a20);
	filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#faa51a', endColorstr='#f47a20');
}
.orange:hover {
	background: #f47c20;
	background: -webkit-gradient(linear, left top, left bottom, from(#f88e11), to(#f06015));
	background: -moz-linear-gradient(top,  #f88e11,  #f06015);
	filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#f88e11', endColorstr='#f06015');
}
.orange:active {
	color: #fcd3a5;
	background: -webkit-gradient(linear, left top, left bottom, from(#f47a20), to(#faa51a));
	background: -moz-linear-gradient(top,  #f47a20,  #faa51a);
	filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#f47a20', endColorstr='#faa51a');
}

div.c_button {
	width: 100px;
	height: 40px;
	float: left;
    display: block;
    padding : 4px;
    text-align:center;
    border: 0px;
}

div.r_button {
	width: 92px;
	height: 40px;
	float: left;
    display: block;
    padding : 4px;
    text-align:center;
    border: 0px;
}

div.modifator {
	background-image:url('../image/modifator.png');
	background-position:0px 0px;
	background-repeat:no-repeat;
    display: block;
    border: 0px;
}
div.label {
	position: absolute;
    background-image:url('../image/damage.png');
	background-position:0px 0px;
    background-size:200% 100%;
	background-repeat:no-repeat;
	font: 8px arial,sans-serif;
	display: block;
	height : 8px
	padding: 0px;
    border: 1px;
    border-color : #aaaaaa;
}

div.percentageindicator {
    background-image:url('../image/damage.png');
	background-position:0px 0px;
    background-size:200% 100%;
}

div.mezzo_title {
    background-color: #eeeeee;
    color : #000000;
    font-family: Verdana, Helvetica, sans-serif;
    font-size: 20px;
}

div.mezzo_illustration {
    float: left;
    position: relative; 
    width: 120px; 
    height: 120px;
    background-color: #000000;
    border : 0px;
}

div.mezzo {
    background-color: #000000;
    color : #eeeeee;
    font-family: Verdana, Helvetica, sans-serif;
    font-size: 12px;
    padding : 4px;
    border: 1px;
    border-style:solid;
    border-color: #eeeeee;
    position: absolute; 
    left: 50px;
    top: 100px;
}

div.mezzo_main {
    background-color: #11111a;
    color : #eeeeee;
    font-family: Verdana, Helvetica, sans-serif;
    font-size: 12px;
}

div.mezzo_buttons {
    margin-left: auto;
    margin-right: auto;
}

div.mezzo_button {
    float: left; 
    margin-left: 20px;
    margin-right: 20px;
}

.BorderTop {
   background: url('../image/corner_tl.png') no-repeat;
   padding-left: 20px;
}
.BorderTop div {
   background: url('../image/corner_tr.png') top right no-repeat;
   padding-right: 20px;
}
.BorderTop div div {
   background: url('../image/border_t.png') repeat-x;
   padding: 0;
   height: 20px;
}

.BorderMiddle {
   background: url('../image/border_l.png') repeat-y;
   padding-left: 20px;
   padding-top: 0px;
}
.BorderMiddle div {
   background: url('../image/border_r.png') top right repeat-y;
   padding-right: 20px;
}
.BorderMiddle div div {
   background: none;
   padding: 0;
}

.BorderBottom {
   background: url('../image/corner_bl.png') no-repeat;
   padding-left: 20px;
}
.BorderBottom div {
   position: clear;
   background: url('../image/corner_br.png') top right no-repeat;
   padding-right: 20px;
}
.BorderBottom div div {
   background: url('../image/border_b.png') repeat-x;
   padding: 0;
   height: 20px;
}

div.sprite {
    background-image:url('../image/ships.png');
    background-position:0px 0px;
    background-repeat:no-repeat;
    position:relative;
    display: block;
    padding: 0px;
    border: 0px;
}

div.spaceviewport {
    padding: 0px;
}